<template>
	<view class="container">
		<view class="form-wrap">
			<h1 class="form-name">表单名称</h1>
				<view v-for="item in auditInfo">
					<!-- input -->
					<view v-if="item.type === 'text'">
						<u-form-item :label="item.name" label-width="200">
							<u-input v-model="formData[item.prop]" :placeholder="item.tip"/>
						</u-form-item>
					</view>
					<!-- 多行文本 -->
					<view v-else-if="item.type === 'textarea'">
						<u-form-item :label="item.name" label-width="200">
							<u-input :placeholder="item.tip" v-model="formData[item.prop]" :type="item.type" border height="100" auto-height />
						</u-form-item>
					</view>
					<!-- 时间选择器 -->
					<view v-else-if="item.type === 'time'">
						<u-form-item :label="item.name" label-width="200">
							<picker mode="time" :value="formData[item.prop]"  @change="handleTime($event,item.prop)">
								<view class="uni-input">{{formData[item.prop]}}</view>
							</picker>
						</u-form-item>
					</view>
					<!-- 日期选择器 -->
					<view v-else-if="item.type === 'date'">
						<u-form-item :label="item.name" label-width="200">
							<picker mode="date" :value="formData[item.prop]"  @change="handleDateChange($event,item.prop)">
								<view class="uni-input">{{formData[item.prop]}}</view>
							</picker>
						</u-form-item>
					</view>
					<!-- 单选 -->
					<view v-else-if="item.type === 'radio'">
						<u-form-item :label="item.name" label-width="200">
							<u-radio-group v-model="formData[item.prop]" @change="radioGroupChange($event,item.prop)">
								<u-radio 
									v-for="(radio, index) in item.default" :key="index" 
									:name="radio"
									active-color="red"
								>
								{{radio}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</view>
					<!-- 多选 -->
					<view v-else-if="item.type === 'checkbox'">
						<u-form-item :label="item.name" label-width="200">
							<u-checkbox-group  @change="checkboxGroupChange($event,item.prop)">
								<u-checkbox v-for="check in item.checkList" v-model="check.checked" :name="check.name" active-color="red">{{check.name}}</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</view>
					<!-- 图片上传 -->
					<view v-else-if="item.type === 'uploadImg'">
						<u-form-item :label="item.name" label-width="200">
							<view style="display: flex;">
								<view class="preview" v-if="formData[item.prop].length !== 0">
									<u-image   width="210rpx" height="210rpx" :src="formData[item.prop]"></u-image>
									<u-icon @click="handleDelete(item.prop)" class="close" name="close"  size="36"></u-icon>
								</view>
								<view class="upload-wrap" @click="handleUploadImg(item.prop)">
									<u-icon name="plus"  size="36"></u-icon>
									<view class="">
										选择图片
									</view>
								</view>
							</view>
						</u-form-item>
					</view>
					<!-- 视频类型 -->
					<view v-else-if="item.type === 'uploadVideo'">
						<u-form-item :label="item.name" label-width="200">
							<view style="display: flex;">
								<view class="preview" v-if="formData[item.prop].length !== 0">
									<video :src="formData[item.prop]" style="width: 210rpx; height: 210rpx;"></video>
									<u-icon @click="handleDelete(item.prop)" class="close" name="close"  size="36"></u-icon>
								</view>
								<view class="upload-wrap" @click="handleUploadVideo(item.prop)">
									<u-icon name="plus"  size="36"></u-icon>
									<view class="">
										上传视频
									</view>
								</view>
							</view>
						</u-form-item>
					</view>
				</view>
			</u-form>
		</view>
		
		<view class="btn-wrap">
			<button type="warn" class="subBtn" @click="handleSubmit">提交报单</button>
		</view>
	</view>
</template>

<script>
	import {reportFormInfo,reportAdd} from '@/global/api/report.js'
	export default {
		data() {
			return {
				formData: {},
				auditInfo: [],
				pic_url: [],
				isAdd: true, // 新增是true 编辑false
				report_id: '', // 编辑时使用
			}
		},
		created() {
			
		},
		onLoad(options) {
			if (options.data) {
				const data = JSON.parse(options.data)
				this.report_id = data.id
				console.log(data,'data')
				this.isAdd = false
				this.auditInfo = data.audit_info
				const audit = data.audit_info.map(item => {
					if (item.type == 'checkbox') {
						let arr = []
						// 多选时， 需要绑定一个布尔值，是否选中
						item.default.forEach(check => {
							let obj = {
								name: check,
								checked: item.value.includes(check) // 检查默认值是否存在于 value 中
								}
							arr.push(obj)
						})
							this.$set(this.formData,item.prop, item.value)
							this.$set(item, 'checkList', arr)
						} else {
							this.$set(this.formData,item.prop,item.value)
						}
						return item
				})
				} else {
				this.reportFormInfoAPI()
			}
		},
		methods: {
			// 单选
			radioGroupChange(e,prop) {
				console.log(e,prop)
				this.formData[prop] = e
			},
			checkboxGroupChange(e,prop) {
				console.log(e,prop)
				this.formData[prop] = e
			},
			// 选择时间
			handleTime(e,prop) {
				console.log(e,prop)
				this.formData[prop] = e.detail.value
			},
			// 选择日期
			handleDateChange(e,prop) {
				console.log(e,prop)
				this.formData[prop] = e.detail.value
			},
			// 上传图片
			handleUploadImg(prop) {
				console.log(prop,)
				if (this.formData[prop]) return uni.showToast({
					title: '只能上传一张图片',
					icon: 'none'
				})
				this.$utils.uploadImage(1,async (res)  => {
					console.log(res,'1111')
					this.formData[prop] = res
				})
			},
			// 删除图片/视频
			handleDelete(prop) {
				this.formData[prop] = ''
			},
			// 上传视频
			handleUploadVideo(prop) {
				console.log(this.formData[prop])
				if (this.formData[prop]) return uni.showToast({
					title: '只能上传一个视频',
					icon: 'none'
				})
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success:(res) => {
						this.$http.UPLOAD_VIDEO(res.tempFilePath, async res => {
							console.log(res)
							this.formData[prop] = res.url
						})
					}
				})
			},
			// 表单提交
			handleSubmit() {
				const form = {...this.formData}
				// 遍历formItem是否有值
				for (const key in form) {
					if (form[key] === '' || form[key].length === 0) {
						const index = key.split('e')[1] //拿到索引
						if (this.auditInfo[index].required) {
							return uni.showToast({
								title: this.auditInfo[index].name + '不能为空',
								icon: 'none'
							});							
						}
					}
				}
				const formData = {audit_info: this.auditInfo}
				if (!this.isAdd) {
					formData.report_id = this.report_id
				}
				formData.audit_info.map((item,index ) => {
					item.value = this.formData[item.prop]
					return item
				})
				
				reportAdd(formData).then(res =>{
					console.log(res)
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success: () => {
							uni.navigateTo({
								url:'/global/list/list'
							})
						}
					})
				})

			},
			async reportFormInfoAPI() {
				const res = await reportFormInfo()
				console.log(res)
				this.auditInfo = res.data.map((item,index) => {
					item.prop = 'value' + index
					const prop = 'value' + index
					if (item.type == 'radio') {
						item.default = item.default.split(',')
						this.$set(this.formData, prop, item.default[0])
					} else if (item.type == 'checkbox') {
						let arr = []
						// 多选时， 需要绑定一个布尔值，是否选中
						item.default.split(',').forEach(check => {
							let obj = {
								name: check,
								checked: false
							}
							arr.push(obj)
						})
						this.$set(this.formData,prop,'')
						this.$set(item, 'checkList', arr)
						item.default = item.default.split(',')
					} else if(item.type == 'time') {
						const time = item.default ? item.default : '00:00'
						this.$set(this.formData, prop, time)
					} else if(item.type == 'date') {
						const nowDate = new Date().toLocaleDateString()
						const date = item.default ? item.default : nowDate
						this.$set(this.formData, prop, date)
					} else if(item.type === 'uploadImg' || item.type === "uploadVide") {
						this.$set(this.formData,prop, item.default)
					} else {
						this.$set(this.formData, prop, item.default)
					}
					return item
				})
				console.log(this.auditInfo)
				console.log(this.formData)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: rgb(242, 242, 242);
		padding: 20rpx 20rpx 300rpx;
		.preview {
			position: relative;
			.close {
				position: absolute;
				top: 8px;
				right: 10px;
			}
		}
		.form-wrap {
			padding: 15rpx 25rpx;
			border-radius: 20rpx;
			background-color: #fff;
			border-bottom: 1px solid #ececec;
			.upload-wrap {
				width: 210rpx;
				height: 210rpx;
				background-color: #f4f5f6;
				display: flex;
			  justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			.form-name {
				font-size: 34rpx;
				line-height: 70rpx;
				font-weight: bold;
			}
			.form-item {
				display: flex;
				.title {
					width: 200rpx;
				}
			}
		}
		.btn-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			.subBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 85%;
				margin-top: 16rpx;
				border-radius: 50rpx;
				height: 80rpx;
			}
		}
	}
</style>
